<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理端客户分析</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css"/>
    <!--固定table列-->
    <link href="/js/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet"/>
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css"/>
    <!-- 多选下拉 -->
    <link rel="stylesheet" href="/css/bootstrap-multiselect.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-select.css" type="text/css"/>
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" href="/css/productManager/productDetail.css"/>
    <style>
        #staticBackdrop{
             left: 50%;
             top: 50%;
             transform: translate(-50%,-50%);
             min-width:80%;
        }
        .dropdown-menu{
            max-height: 250px !important;
        }
        .title button{
            margin-bottom: 20px;
        }
        #modify{
            display: none;
        }
        i{
            font-style: normal;
        }
        .countBtn{
            width: 30px;
            height: 30px;
            background: #c0c4cc;
            border: none;
            border-radius: 4px;
        }
        .countInp{
            width: 50px;
            text-align: center;
            height: 30px;
        }
        .dropdown-menu{
          max-height: 400px !important;
        }
    </style>
</head>
<body>
<div class="container-fluid customer-page">
    <div class="card">
        <div class="card-header">
            <h1>会员产品详情</h1>
        </div>
        <div class="card-body">
            <div class="row content-action">
                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                    <button type="button" class="btn btn-primary pull-right" id="editBtn" data-toggle="modal"  onclick="editBtn()">编辑</button>
                    <button type="button" class="btn btn-primary pull-right" id='sumberBtn'  onclick="sumber()">保存</button>
                </div>
                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display: flex">
                    <div id="card">
                        <span id="productBs" class="hidden" th:text="${memberProductId}"></span>
                        <div id="Img" style="width: 300px;height: 200px">
                            <img src="" alt="会员卡" class="cardImg">
                        </div>
<!--                        <div style="width: 300px;height: 200px;display: none;" id="uploadImg">-->
<!--                            <img style="width: 100%;height: 80%;" id="newsPic" />-->
<!--                            <div id="imageId"  style="display: none"></div>-->
<!--                            <input type="file" id="files" onchange="getNewsPicUpload(this)" class="img-button"/>-->
<!--                        </div>-->
                        <div class="cardMess" id="cardMess">
                            <p style="font-size: 18px;font-weight:800;display: flex;justify-content: center;align-items: center"><i class="left"></i>会员卡信息 <i class="right"></i></p>
                              <div id="carMess">
                                  <p>
                                      <span>会员卡名称：<i id="cardName"></i></span>
                                      <span>服务次数：<i id="number">次</i></span>
                                  </p>
                                  <p>
                                      <span>价格：<i id="numberPrice"></i>￥</span>
                                      <span>会员等级：<i id="membershipLevelNumber"></i></span>
                                  </p>
                                  <p>
                                      <span>是否计入会员产品业绩：<i id="whetherIncludedAchievement"></i></span>
                                      <span>业绩金额比：<i id="performanceConversionRatio"></i></span>
                                  </p>
                                  <p>
                                      <span style="width: 100%">产品有效期：<i id="time"></i></span>
                                  </p>

                                  <input type="text" id="echoStarTime" hidden="hidden">
                                  <input type="text" id="echoEndTime" hidden="hidden">
                                  <input type="hidden" id="whetherRenew">
                              </div>
<!--                            <p class="cardName"><span id="cardName"></span> <span style="font-size: 14px;font-weight: normal;">( 服务次数：<i id="number" ></i> )</span> <img src="" alt=""></p>-->
<!--                            <p class="cardPrice">价格：<i id="numberPrice"></i>￥</p>-->
<!--                            <p>会员等级</p>-->
                        </div>
<!--                        <div class="cardMess" id="editCardMess" style="display: none">-->
<!--                            <p>卡片名称：<input type="text" value="" id="editCardName"> <span style="margin-right: 20px"></span>服务次数：<input type="text" id="editNumber"></p>-->
<!--                            <p>价格：<input type="text" id="editCardPrice"></p>-->
<!--                        </div>-->
                    </div>

                </div>
                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <p class="title">线上课程 <button type="button" class="btn btn-primary pull-right" data-toggle="modal" onclick="addCourse(1)">新增</button></p>
                    <table id="onlineCourse"></table>
                </div>
                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <p class="title">线下课程 <button type="button" class="btn btn-primary pull-right" onclick="addCourse(2)">新增</button></p>
                    <table id="offlineCourse"></table>
                </div>
                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <p class="title">增值服务  <button type="button" class="btn btn-primary pull-right" onclick="addCourse(3)">新增</button></p>
                    <table id="valueAddedServices"></table>
                </div>
                <!--新增弹窗-->
                <div class="modal fade" id="staticBackdrop"  data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" style="width: 100%;height: 100%;">
                    <div class="modal-dialog" style="margin-top:10%;">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <h5 class="modal-title" id="staticBackdropLabel">新增</h5>
                            </div>
                            <div class="modal-body" style="display:flex;">
                                <div class="pull-left input" style="position: relative;">
                                    <label for="">课程类型：</label>
                                    <input type="text" id="followContactId" hidden>
                                    <input type="text" onfocus="changeName(this);" class="form-control" id="followContact" autocomplete="off">
                                    <ul id="followContactList" class="dropdown-menu" style="overflow: hidden;overflow-y: auto"></ul>
                                </div>
                                <div class="pull-left input" style="position: relative;margin-left: 20px">
                                    <label for="">课程小类：</label>
                                    <input type="text" id="courseClassId" hidden>
                                    <input type="text" onfocus="courseClassName(this);" class="form-control" id="courseContent" autocomplete="off">
                                    <ul id="courseClassList" class="dropdown-menu" style="overflow: hidden;overflow-y: auto"></ul>
                                </div>
                                <div class="form-row control-label" style="width: 23%;margin-left: 20px">
                                    <label for="">服务次数：</label>
                                    <div>
                                        <input type="text" id="serviceCount" class="form-control" placeholder="请输入服务次数">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"  onclick="resetBtn(this)">重置 </button>
                                <button type="button" class="btn btn-primary" id="addBtn" onclick="addBtn('添加')">添加</button>
                                <button type="button" class="btn btn-primary" id="modify" onclick="addBtn('修改')">修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="newCourseModel"  data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" style="width: 100%;height: 100%;">
    <div class="modal-dialog" style="width: 60%">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newCourseModelLabel">新增课程</h5>
            </div>
            <div class="modal-body" >
                <div class="row" style="padding: 0 20px;box-sizing: border-box">
                    <div class="min-search pull-right" style="margin-bottom: 20px">
                        <input class="form-control" type="text" placeholder="请输入产品名称" id="customerNameMin" name="customerNameMin">
                        <button class="btn btn-primary" type="button" onclick="searchMyCustomerPool()"><i class="mdi mdi-magnify"></i><span>搜索</span></button>
                    </div>
                    <table id="addCourseTable"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="addCourseSubmit()">确定 </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="modal fade" id="editCardMessModel"  data-keyboard="false" tabindex="-1" aria-labelledby="editCardMessModel" aria-hidden="true" style="width: 100%;height: 100%;">
    <div class="modal-dialog" style="width: 30%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h5 class="modal-title" id="editCardMessTitle">编辑会员产品信息</h5>
            </div>
            <div class="modal-body" >
                <form class="form-horizontal" id="editCardMessForm" autocomplete="off" style="padding: 10px;">
<!--                <div class="row" style="padding: 0 20px;box-sizing: border-box">-->
                    <div  class="form-group" style="display: flex;justify-content: center">
                        <div style="width: 300px;height: 200px;" id="uploadImg">
                            <img style="width: 100%;height: 80%;" id="newsPic" />
                            <div id="imageId"  style="display: none"></div>
                            <input type="file" id="files" onchange="getNewsPicUpload(this)" class="img-button"/>
                        </div>
                    </div>
                    <div class="form-group">
<!--                        <div class="cardMess" id="editCardMess" style="display: none">-->
<!--                            <p>卡片名称：<input type="text" value="" id="editCardName"> <span style="margin-right: 20px"></span>服务次数：<input type="text" id="editNumber"></p>-->
<!--                            <p>价格：<input type="text" id="editCardPrice"></p>-->
<!--                        </div>-->
                        <label class="col-xs-4 control-label label-required">卡片名称:</label>
                        <div class="col-xs-6">
                            <input id="editCardName" name="editCardName" type="text" class="form-control" placeholder="请输入卡片名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-4 control-label label-required">服务次数：</label>
                        <div class="col-xs-6">
                            <input id="editNumber" name="editNumber" type="text" class="form-control" placeholder="请输入服务次数">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-4 control-label label-required">价格：</label>
                        <div class="col-xs-6">
                            <input id="editCardPrice" name="editCardPrice" type="text" class="form-control" placeholder="请输入价格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-4 control-label label-required">开始时间：</label>
                        <div class="form-content  col-xs-6">
                            <input type="text" class="form-control timeInput" id="starTime" placeholder="请输入开始时间" autocomplete="off" name="starTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-4 control-label label-required">结束时间：</label>
                        <div class="col-xs-6">
                            <input type="text" class="form-control timeInput" id="endTime" name="endTime" placeholder="请输入结束时间" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-4 control-label label-required">会员等级：</label>
                        <div class="col-xs-6">
                            <input id="membershipLevel" name="membershipLevel" type="text" class="form-control" placeholder="请输入会员等级">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-4 control-label label-required">业绩金额比：</label>
                        <div class="col-xs-6">
                            <input id="editPerformanceConversionRatio" name="editPerformanceConversionRatio" type="text" class="form-control" placeholder="请输入业绩金额比" onkeyup="value=value.replace(/[^\d^\.]+/g,'')">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <label class="control-label label-required">是否计入会员产品业绩</label>
                            <div class="" style="display: inline-block;">
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" value="0" id="included_achievement" name="whetherIncludedAchievement"><span>是</span>
                                </label>
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" value="1" id="not_included_achievement" name="whetherIncludedAchievement"><span>否</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <label class="control-label label-required">是否可续费产品</label>
                            <div class="" style="display: inline-block;">
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" value="0" id="renew" name="whetherRenew"><span>是</span>
                                </label>
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" value="1" id="no_renew" name="whetherRenew"><span>否</span>
                                </label>
                            </div>
                        </div>
                    </div>
                 </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"  onclick="sumber()">保存 </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>

<!--            </div>-->
        </div>

    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>
<!--标签插件-->
<script src="/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>

<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="/js/crm/common/dataRangePicker.min.js"></script>
<!-- 多选框下拉 -->
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/bootstrap.lyear.dropdowntree.min.js"></script>
<!--table固定列-->
<script type="text/javascript" src="/js/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
<!-- 图表 -->
<script type="text/javascript" src="/js/echarts.min.js"></script>
<!-- 点击加载更多 -->
<script type="text/javascript" src="/js/loadmore.js"></script>
<script src="/js/crm/productManager/productServiceDetail.js"></script>
</html>